import React, { Component } from 'react'
import intl from 'react-intl-universal'
import { httpPost } from '../../services/http'
import { FontAwesomeIcon } from '@fortawesome/react-fontawesome'
import MyJumbotron from '../../components/MyJumbotron/MyJumbotron'
import {
  Button,
  Card,
  Col,
  Container,
  Form,
  FormControl,
  InputGroup,
  Row
} from 'react-bootstrap'
import { Formik } from 'formik'
import * as yup from 'yup'

class Register extends Component {

  submit = async (...aru) => {
    const { history } = this.props
    const formData = aru[0]
    const [res] = await httpPost({ url: '/user/register', data: formData })
    if (res) {
      const { token } = res.data
      window.localStorage.setItem('token', token)
      console.log(res)
      history.goBack()
    }
  }

  render () {
    const enter = {
      username: intl.get('enter', { inputType: intl.get('username') }),
      email: intl.get('enter', { inputType: intl.get('email') }),
      password: intl.get('enter', { inputType: intl.get('password') })
    }
    const schema = yup.object().shape({
      username: yup.string().trim().required(enter.username),
      email: yup.string().trim().required(enter.email),
      password: yup.string().
        trim().
        min(6, intl.get('less', { length: 6 })).
        max(20, intl.get('more', { length: 20 })).
        required(intl.get('enter', { inputType: intl.get('password') }))
    })
    return (
      <>
        <MyJumbotron title = {'welcome to register'} />
        <Container>
          <Row className = {'justify-content-center'}>
            <Col xs = {10} sm = {8} md = {6} lg = {4}>
              <Card>
                <Card.Body>
                  <Formik
                    validationSchema = {schema}
                    onSubmit = {this.submit}
                    initialValues = {{
                      username: 'zhangxu',
                      email: '1991525233@qq.com',
                      password: '361230312.,'
                    }}
                  >
                    {
                      ({
                        handleSubmit,
                        handleChange,
                        values,
                        errors
                      }) => {
                        return (
                          <Form noValidate
                                onSubmit = {handleSubmit}>
                            {/* 用户名 */}
                            <Form.Group>
                              <InputGroup hasValidation>
                                <InputGroup.Prepend>
                                  <InputGroup.Text>
                                    <FontAwesomeIcon
                                      icon = {'user-circle'} />
                                  </InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl
                                  name = {'username'}
                                  value = {values.username}
                                  isInvalid = {!!errors.username}
                                  onChange = {handleChange} />
                                <FormControl.Feedback
                                  type = {'invalid'}>{errors.username}</FormControl.Feedback>
                              </InputGroup>
                            </Form.Group>
                            {/* 邮箱 */}
                            <Form.Group>
                              <InputGroup hasValidation>
                                <InputGroup.Prepend>
                                  <InputGroup.Text id = "email">
                                    <FontAwesomeIcon
                                      icon = "envelope-open-text" />
                                  </InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl
                                  type = "email"
                                  name = {'email'}
                                  value = {values.email}
                                  aria-describedby = "email"
                                  onChange = {handleChange}
                                  isInvalid = {!!errors.email}
                                />
                                <FormControl.Feedback type = {'invalid'}>
                                  {errors.email}
                                </FormControl.Feedback>
                              </InputGroup>
                            </Form.Group>
                            {/* 密码 */}
                            <Form.Group>
                              <InputGroup hasValidation>
                                <InputGroup.Prepend>
                                  <InputGroup.Text>
                                    <FontAwesomeIcon icon = "lock" />
                                  </InputGroup.Text>
                                </InputGroup.Prepend>
                                <FormControl
                                  name = {'password'}
                                  value = {values.password}
                                  onChange = {handleChange}
                                  isInvalid = {!!errors.password}
                                  type = "password"
                                />
                                <FormControl.Feedback
                                  type = {'invalid'}>{errors.password}</FormControl.Feedback>
                              </InputGroup>
                            </Form.Group>
                            {/* 注册按钮 */}
                            <Form.Group>
                              <Button
                                type = {'submit'}
                                style = {{ width: '100%' }}
                                variant = "info">{intl.get(
                                'register')}</Button>
                            </Form.Group>
                            <Form.Group>
                              <Button
                                onClick = {() => {
                                  this.props.history.push('/login')
                                }}
                                style = {{ width: '100%' }}
                                variant = "primary">
                                {intl.get('log in')}
                              </Button>
                            </Form.Group>
                          </Form>
                        )
                      }
                    }
                  </Formik>
                </Card.Body>
              </Card>
            </Col>
          </Row>
        </Container>
      </>
    )
  }
}

export default Register
